import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList,
    TouchableOpacity,
    DeviceEventEmitter,
    TextInput,
    Modal
} from 'react-native';
import {Card} from 'react-native-shadow-cards';
import QRCode from 'react-native-qrcode-svg';
import Styles from './Styles';
import CommonDialog from 'react-native-dialogs-master';
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import styles from "../Lists/styles";

const { width, height } = Dimensions.get('window');
// 初始化总数据

export default class SetUserPass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            toastModelVisible: false,
            message: '',
            newpass:null,
            oldpass:null,
            isSend:false,
        };
        this.timeOut=null;
    }
    static navigationOptions = {
        title: '设置密码',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#cc0033',
            paddingTop:18,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {

        },
    }
    componentWillUnmount(){
        clearTimeout(this.timeOut);
    }
    componentDidMount(){
        // 在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作
        // *** 因为UI已经成功渲染，而且这里面是异步的，所以放在这个函数进行数据的请求等复杂的操作，不会出现UI错误**
    }
    do_SetUserCertification(){
        if(this.state.isSend){
            return;
        }
        this.setState({
            isSend:true
        });
        if(this.state.oldpass == null){
            this.do_toast('请输入旧密码', 500, () => {
                this.timeOut=null;
            });
            this.setState({isSend:false});
            return;
        }
        if(this.state.newpass == null){
            this.do_toast('请输入新密码', 500, () => {
                this.timeOut=null;
            });
            this.setState({isSend:false});
            return;
        }
        if(this.state.newpass != this.state.newpass2){
            this.do_toast('新密码不一致', 500, () => {
                this.timeOut=null;
            });  
            this.setState({isSend:false});
            return;
        }
        let params = {};
        params.token = Ugame.info.Token;
        params.oldpass = this.state.oldpass;
        params.newpass = this.state.newpass;
        let navigation = this.props.navigation;
        Httpc.get(REQUEST.SetUserPass,params,function (res) {
            console.log(res);
            this.do_toast(res.Message, 500, () => {
                this.timeOut=null;
            });  
            if(res.StatusCode!=1){
                return;
            }
            // this.setState({
            //     isSend:false
            // });
            navigation.goBack();
        }.bind(this));
    }
    do_toast = (str, time, func) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        this.timeOut=setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });            
            func();
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    render() {
        return (
            <View style={Styles.container}>
                <StatusBar translucent={ true } backgroundColor="transparent" />
                <View style={[Styles.inputItem,{marginTop:20}]}>
                    <TextInput
                        placeholder="请输入旧密码"
                        placeholderTextColor="#CCC"
                        onChangeText={(oldpass) => this.setState({oldpass})}
                        // onEndEditing={this.dissmissKeyboard.bind(this)}
                    />
                </View>
                <View style={Styles.inputItem}>
                    <TextInput
                        placeholder="请输入新密码"
                        placeholderTextColor="#CCC"
                        onChangeText={(newpass) => this.setState({newpass})}
                        // onEndEditing={this.dissmissKeyboard.bind(this)}
                    />
                </View>
                <View style={Styles.inputItem}>
                    <TextInput
                        placeholder="请再次输入"
                        placeholderTextColor="#CCC"
                        onChangeText={(newpass2) => this.setState({newpass2})}
                        // onEndEditing={this.dissmissKeyboard.bind(this)}
                    />
                </View>
                <TouchableOpacity onPress={() => this.do_SetUserCertification()}>
                    <View style={Styles.login_btn}>
                        <Text style={{color:'#ffffff',fontSize:16}}>确认</Text>
                    </View>
                </TouchableOpacity>
                {this.toast()}
            </View>
        )
    }
}

